<script lang="ts" setup>
import type { TabItem } from '@/components/custom-tab/custom-tab.vue'
import { ref, watch } from 'vue'
import ScrollList from './components/scroll-list.vue'

interface OrderTabItem extends TabItem {
  label: string
  status: string
  isKeepAlive: boolean
}

const props = defineProps<{
  status?: string
}>()

// 药品订单的状态
const orderTabs = ref<OrderTabItem[]>([
  { label: '全部', status: '', isKeepAlive: false },
  { label: '待支付', status: '10', isKeepAlive: false },
  { label: '待发货', status: '11', isKeepAlive: false },
  { label: '待收货', status: '12', isKeepAlive: false },
  { label: '已完成', status: '13', isKeepAlive: false },
])

// 高亮索引
const tabIndex = ref(orderTabs.value.findIndex((v) => v.status === props.status))
// 监听tabIndex的变化
watch(
  tabIndex,
  (index) => {
    // 缓存对应的组件
    orderTabs.value[index].isKeepAlive = true
  },
  {
    immediate: true, // 立即执行
  }
)
</script>

<template>
  <view class="medicine-page">
    <!-- 订单状态 -->
    <view class="order-status-tabs">
      <!-- v-model 双向绑定 -->
      <custom-tab v-model:current="tabIndex" :data="orderTabs"></custom-tab>
    </view>
    <!-- 订单列表 -->
    <template v-for="(tab, index) in orderTabs" :key="tab.label">
      <ScrollList v-if="tab.isKeepAlive" v-show="tabIndex === index" :status="tab.status" />
    </template>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
